<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" href="__STATIC_URL__/static/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <script src="__STATIC_URL__/static/js/jquery.min.js"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/js/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section id="content">
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">

            <iframe id="rightframe" name="decoratorIframeBody" src="{:url('index/index')}" frameborder="0">
            </iframe>


        {include file='public/footer'/}
    </div>
</section>

<!-- 公告模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">系统公告</h4>
            </div>
            <div class="modal-body">
                <div id="noticeinfotitle" style="text-align: center;font-size: 18px"></div>
                <div  id="noticeinfo" style="margin-top: 40px;padding: 20px"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var symbolSize = 8;
    // 指定图表的配置项和数据
    var datas = {$tongji2['riqi']};
    var prices = {$tongji2['price']};
    var orders = {$tongji2['order']};

    var option = {
        title: {
            top: -10,
            left: 30,
            text: '近10天交易'
        },
        tooltip: {
            trigger: 'axis',
            show: true,
            padding: 10,
            formatter: function (params, ticket, callback) {
                var res = params[0].name + '<br/>' + params[0].seriesName + ":" + params[0].value + '<br/>' + params[1].seriesName + ":" + params[1].value;
                return res;
            },
            default: true
        },
        grid: {					//图表显示在容易的位置
            x: 50,
            y: 80,
            x2: 40,
            y2: 40,
            borderWidth: 1
        },
        //图表显示在容器的位置
        legend: {
            right: 'center',
            top: 20,
            orient: 'horizontal',
            data: ['交易金额', '交易笔数'],
            itemGap: 50				//图标间距
        },

        xAxis: {
            boundaryGap: false,
            data: datas,
            axisLabel: {
                interval: 0,
                rotate: -20,
            }
        },
        yAxis: [
            {
                name: '交易金额',
                nameLocation: 'end',
                type: 'value',
                inverse: false,
                splitLine: {
                    show: false
                },
            },
            {
                name: '交易笔数',
                nameLocation: 'end',
                type: 'value',
                inverse: false,
                splitLine: {
                    show: false
                }
            }
        ],
        series: [{
            name: '交易金额',
            type: 'line',
            smooth: true,   //是否为平滑曲线
            symbolSize: symbolSize,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                }
            },
            data: prices
        }, {
            name: '交易笔数',
            type: 'line',
            smooth: true,   //是否为平滑曲线
            symbolSize: symbolSize,
            yAxisIndex: 1,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#9ACFB9'
                    }, {
                        offset: 1,
                        color: '#71CAA5'
                    }])
                }
            },
            data: orders
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = myChart.resize;


</script>
<script src="__STATIC_URL__/static/js/commen.js" type="text/javascript" charset="utf-8"></script>
<script>
    function noticeshow(obj) {
        $.ajax({
            url:"{:url('pub/getnoticeinfo')}",
            type:"post",
            async:true,
            data:{
                id:$(obj).attr('data-id'),
            },
            success:function(data){
                $('#noticeinfotitle').text(data.title);
                $('#noticeinfo').text(data.info);
                $('#myModal').modal('show');
            }
        })


    }
    function myGod(id, w, n) {
        var box = document.getElementById(id), can = true, w = w || 1500, fq = fq || 10, n = n == -1 ? -1 : 1;
        box.innerHTML += box.innerHTML;
        box.onmouseover = function () {
            can = false
        };
        box.onmouseout = function () {
            can = true
        };
        var max = parseInt(box.scrollHeight / 2);
        new function () {
            var stop = box.scrollTop % 18 == 0 && !can;
            if (!stop) {
                var set = n > 0 ? [max, 0] : [0, max];
                box.scrollTop == set[0] ? box.scrollTop = set[1] : box.scrollTop += n;
            }
            ;
            setTimeout(arguments.callee, box.scrollTop % 18 ? fq : w);
        };
    };
    myGod('div4', 1500);
</script>
</html>
